<template>
	<div>
		<div class="header">


			<!-- title="智能供佛系统" -->
			<van-nav-bar style="  background: linear-gradient(90deg, #41A9B7,#4fd4e2, #41A9B7);height: 5rem;line-height: 5rem;">

				<span class="title" slot="title">用户卡绑定</span>
			</van-nav-bar>

			<!-- <van-nav-bar title="智能供佛系统" style=" background: url(./images/系统标题部分.png);height: 80px;line-height: 80px; background-size:1142px 80px;background-repeat:no-repeat;">
				<van-icon name="search" slot="right" />
			</van-nav-bar> -->
		</div>



		<!-- /////////////////////////////////////////////////////////// -->
		<div class="content">

			<h1 style="margin-top: 15.625rem; text-shadow: 2px 0px 10px #FFFFFF;">
				{{mes}}
			</h1>



		</div>
	</div>

</template>

<script>
	export default {

		data() {
			return {
				mes: "请将您的卡片对准读卡感应器. . .",
				flag: true,
				cardTimeout:0
			}
		},
		methods: {
			listenForCard(){
				
				let _this=this;
				
			
				let keyNumber=[48,49,50,51,52,53,54,55,56,57];
				let event_card_no='';
				/* 监听键盘事件-读卡 */
				function fn(e){
					
				
					for(let i =0;i<10;i++){
						if(e.keyCode==keyNumber[i]){
							event_card_no+=i;
							break;
						}else if(e.keyCode==13){
							console.log(event_card_no);
							//event_card_no='';	
							document.removeEventListener("keydown", fn);
							console.log("移除了该事件");
							_this.addCard(event_card_no);
							break;
						}	
					}
				
				}
				
				document.addEventListener("keydown",fn);
				
				
				this.cardTimeout =setTimeout(()=>{
						document.removeEventListener("keydown", fn);
						this.$router.go(-1);//因为直接回退上一层，比根据用户身份做判断再路由省事
						this.$toast.fail("刷卡超时！")
					},10000);
					
				
			},
			addCard(card_no){
				
					
					if (card_no.length == 10) { //获取到了有效数据
						////////////////////////////////
						this.axios.post('https://mianmianshi.com/cms/temple/client/updateUser', {
				
								'where': { //修改当前用户
									'id': this.$store.getters.getUser.id,
									'tid': this.$store.getters.getTid
								},
								update: { //更新属性
									card_no: card_no,
									card: 'Y'
								}
				
							})
							.then((res) => {
								if (res) { //成功修改
									this.$toast.success({
										message: '绑定成功！'
									});
									this.$router.push("login");
				
				
				
				
								} else {
									
									this.$router.push("consumer");
									this.$toast.fail({
										message: '服务繁忙，请稍后重试！'
									});
								}
				
							})
							.catch(function(error) {
								console.log(error);
							});
						//
				
					} else {
						this.mes = "无效卡，请重试！";
						//过一会
						let card_timeoutId = setTimeout(() => {
							this.$router.push("consumer");
							this.$toast.fail({
								message: '绑定失败！'
							});
						}, 2000);
				
				
					}
				
				
				
			}
			

		},
		created() {
			this.listenForCard();
		},destroyed() {
			clearTimeout(this.cardTimeout);
		}



	}
</script>

<style>
	.xundeng {
		position: absolute;
		height: 100%;
		width: 100%;
		background: url(../../public/images/xundeng.png) no-repeat;
		background-size: 100% 100%;
	}
</style>
